<template>
    <div class="row product-list">
        <div class="col-sm-12">
            <div class="ibox float-e-margins">
                <div class="ibox-title">
                    <ol class="breadcrumb">
                        <li><a>个人信息</a></li>
                    </ol>
                </div>
                <div class="content-wrapper">
                    <el-form :inline="true" :model="formData" class="demo-form-inline" size="medium" :rules="rules"
                             ref="ruleForm">
                        <el-row>
                            <el-col :span="8" :offset="4">
                                <el-form-item label="姓名" :label-width="formLabelWidth" prop="realName">
                                    <el-input v-model="formData.realName" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8" :offset="4">
                                <el-form-item label="手机号码" :label-width="formLabelWidth" prop="mobile">
                                    <el-input v-model="formData.mobile" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="8" :offset="4">
                                <el-form-item label="邮箱" :label-width="formLabelWidth" prop="email">
                                    <el-input v-model="formData.email" auto-complete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="6" :offset="4">
                                <div class="" style="float: right;margin-right: 20px">
                                    <a class="revision-btn" href="javaScript:void(0)" @click="onSubmitForm">保存</a>
                                </div>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
        </div>
    </div>
</template>

<script>

    export default {
        name: 'profile',
        components: {},
        data() {
            const validMobile = (rule, value, callback) => {
                if (value === '') {
                    callback(new Error('手机号码不能为空！'));
                } else {
                    if (value !== '') {
                        const reg = /^1[3|4|5|7|8][0-9]\d{8}$/
                        if (!reg.test(value)) {
                            callback(new Error('请输入正确的手机号码！'));
                        }
                    }
                    callback();
                }
            };
            return {
                formLabelWidth: '120px',
                formData: {
                    userId: 0,
                    email: '',
                    mobile: '',
                    realName: '',
                    username: '',
                },
                rules: {
                    realName: [
                        {required: true, message: '请输入姓名', trigger: 'blur'}
                    ],
                    email: [
                        {required: true, message: '请输入邮箱', trigger: 'blur'},
                        {type: 'email', message: '请输入正确格式的邮箱', trigger: 'blur,change'}
                    ],
                    mobile: [
                        {required: true, validator: validMobile, trigger: "blur"}
                    ]
                },
                data: {},
                id: ''
            }
        },
        mounted: function () {
            this.getUserInfo();
        },
        methods: {
            async updateWechatCfg() {
                let res = await this.$api.post('/sys/user/update', this.formData);
                if (res.code === 0) {
                    this.getUserInfo();
                    this.$message.success('保存成功');
                } else {
                    this.$message.error(res.msg);
                }
            },
            onSubmitForm() {
                this.$refs.ruleForm.validate((valid) => {
                    if (valid) {
                        this.updateWechatCfg();
                    } else {
                        return false;
                    }
                });
            },
            async getUserInfo() {
                let res = await this.$api.get('/sys/user/info', {});
                if (res.code === 0) {
                    this.formData.userId = res.user.userId;
                    this.formData.username = res.user.username;
                    this.formData.email = res.user.email;
                    this.formData.mobile = res.user.mobile;
                    this.formData.realName = res.user.realName;
                } else {
                    this.$message.error(res.msg);
                }
            },
        }
    }
</script>

<style scoped>
    .product-list .content-wrapper /deep/ .el-form-item__label {
        color: #666;
        font-size: 12px;
    }
</style>
